<template>
    <div id="dialog" class="wrapper">
        <div class="close-button">
            <span></span>
            <el-button :icon="Close" circle @click="mapStore.leftMenu.visible = false;" /></div>
        <dl class="menu">
            <dt style="margin-top: 0;">首页应用</dt>
            <dd>
                <el-button plain @click="mapStore.electronicMapDialog.visible = true">电子地图</el-button>
                <el-button plain @click="mapStore.searchDialog.visible = true">高级搜索</el-button>
            </dd>
            <dt>资源管理</dt>
            <dd>
                <el-button plain @click="mapStore.pointManagementDiaolog.visible = true">点位管理</el-button>
                <el-button plain @click="mapStore.cameraManagementDialog.visible = true">摄像头管理</el-button>
            </dd>
            <dt>系统管理</dt>
            <dd>
                <el-button plain>用户管理</el-button>
                <el-button plain>角色管理</el-button>
            </dd>
            <dd>
                <el-button plain>字段管理</el-button>
                <el-button plain>发布公告</el-button>
            </dd>
        </dl>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import {
    Close
} from '@element-plus/icons-vue'
import pinia from "@/store/pinia.js";
import { useStore } from "@/store/index.js";
const mapStore = useStore(pinia);

// onMounted(() => {
//     const dialog = document.getElementById('dialog');
//     let offsetX, offsetY;
//     dialog.addEventListener('mousedown', function(e) {
//       offsetX = e.offsetX;
//       offsetY = e.offsetY;
//       document.addEventListener('mousemove', onMouseMove);
//       document.addEventListener('mouseup', onMouseUp);
//     });
//     function onMouseMove(e) {
//       dialog.style.left = (e.clientX - offsetX) + 'px';
//       dialog.style.top = (e.clientY - offsetY) + 'px';
//     }
//     function onMouseUp(e) {
//       document.removeEventListener('mousemove', onMouseMove);
//       document.removeEventListener('mouseup', onMouseUp);
//     }
// })
</script>

<style lang='less' scoped>
@import url("./css/index.css");
.wrapper {
    width: 230px;
    height: 450px;
    background: #FFF;
    border-radius: 5px;
    position: absolute;
    left: 10px;
    top: 110px;
    z-index: 999;
    box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, 0.04), 0px 8px 20px rgba(0, 0, 0, 0.08);

    animation-name: modalopen;
    animation-duration: 0.5s;
}

.menu {
    padding-left: 10px;
    padding-right: 10px;
    margin: 0;
}

.menu dt {
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: bold;
}

.menu dd {
    margin-bottom: 10px;
}
 
/* 动画定义 */
@keyframes modalopen {
  from {opacity: 0;}
  to {opacity: 1;}
}
 
@keyframes modalclose {
  from {opacity: 1;}
  to {opacity: 0;}
}
</style>